<template>
  <div class="recomment-box">
    <!-- 布局 -->
    <div class="top">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <!-- 通过循环 -->
        <el-tab-pane
          v-for="(item, index) in tabsList"
          :key="index"
          :label="item.label"
          :name="item.name"
        >
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 头部导航 -->
    <!-- 根据点击头部导航来对应的显示内容：通过路由站位符来实现 -->
    <div class="recomment">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "Recomment",
  data() {
    return {
      activeName: "/recomment/rtstyle",
      tabsList: [
        { label: "个性推荐", name: "/recomment/rtstyle" },
        { label: "歌单", name: "/recomment/songlist" },
        { label: "主播电台", name: "/recomment/zhubo" },
        { label: "排行榜", name: "/recomment/phang" },
        { label: "歌手", name: "/recomment/singer" },
        { label: "最新音乐", name: "/recomment/newmusic" },
      ],
    };
  },
  mounted() {
    //获取 最后点击的值   sessionStorage
    const datas = sessionStorage.getItem("selectItem");
    if (datas) {//如果缓存中有值就拿缓存中的值  就是最后点击的那一次
      this.activeName = datas;
    } else { //如果没有就表示刚进这个页面
      this.activeName = "/recomment/rtstyle";
    }
  },
  methods: {
    handleClick(tab, event) {
      //点击跳转路由
      this.activeName = tab.name;
      this.$router.push(tab.name);
      //解决重新刷新页面  页面默认到个性页面
      sessionStorage.setItem("selectItem", tab.name);
    },
  },
};
</script>

<style scoped lang='less'>
.recomment-box {
  .top {
    width: 469px;
    margin: 0 auto;
  }
  .recomment {
    background: #fff;
    height: 486px;
    padding: 0 80px;
    overflow-y: auto;
  }
}
</style>